<script lang="ts" setup>
 import { ref ,reactive } from 'vue';
 defineProps<{mystyle:string,msg:number}>()
//  const emit =  defineEmits(["xxx"]) //宏函数
//  emit("xxx")
 type PropType = {
    mystyle:string,
    msg:string
 }
 defineEmits<PropType>()

type EmitType = {
    (e:"xxx",data:string):void
    (e:"yyy",d:number):void
}
const emit = defineEmits<EmitType>()
 function f1(){
    emit("xxx","hello")
 }


</script>



<template>

<div class="my_border3">
    <input type="text" :class="mystyle">
    <h1>{{ msg }}</h1>
    <button @click="f1">子组件触发自定义事件xxx</button>

</div>




</template>



<style scoped>
    button{
        margin-bottom: 10px;
    }
    .my_border1{
        border: 1px solid red;
    }
    .my_border2{
        background-color: aqua;
    }
    .my_border3{
        border: 1px dashed blueviolet;
   }

</style>
